<script setup>
import { onMounted, ref } from 'vue'
import { getPlayListTagsAPi } from '@/apis/song'
import { usePlayListStore } from '@/stores/playListStore'
import Recommend from './components/Recommend.vue'
import RecommendList from './components/RecommendList.vue'

const usePlayList = usePlayListStore()
// 歌单标签名称
const playListTags = ref([])
// 激活的标签
const activeName = ref('first')
onMounted(async () => {
  // 获取标签名称
  const { data } = await getPlayListTagsAPi()
  playListTags.value = data.tags
  // 推荐歌单中没数据，重新获取
  if (usePlayList.recommendList.length === 0) {
    usePlayList.getRecommendList()
  }
})

</script>

<template>
  <div class="recomment-song-list">
    <el-tabs v-model="activeName">
      <el-tab-pane label="推荐" name="first">
        <Recommend />
      </el-tab-pane>
      <el-tab-pane :lazy="true" v-for="item in playListTags" :key="item.id" :label="item.name" :name="item.name">
        <RecommendList :tag="item.name" v-if="activeName === item.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang='scss'>
.recomment-song-list {
  max-width: 1165px;
  margin: 0 auto;
}
</style>